<!-- 添加投诉弹窗，使用 el-dialog + el-form -->

<template>
    <div class="add-complain-page">
        <el-dialog 
          v-model="dialogFormVisible" 
          title="创建投诉" 
          width="500"
          @close="closeDialog"
        >
            <el-form 
              ref="ruleFormRef"
              class="el-form" 
              :model="ruleForm" 
              :rules="rules" 
              label-width="auto"
              :disabled="disabled"
            >
                <el-form-item label="投诉标题" prop="title">
                    <el-input 
                      v-model="ruleForm.title" 
                      autocomplete="off" 
                      placeholder="请输入投诉标题"
                    />
                </el-form-item>
                <el-form-item label="投诉内容" prop="content">
                    <el-input 
                      v-model="ruleForm.content" 
                      type="textarea" 
                      rows="5" 
                      resize="none" 
                      placeholder="请输入投诉内容"
                    />
                </el-form-item>
                <el-form-item label="联系人" prop="name">
                    <el-input 
                      v-model="ruleForm.name" 
                      autocomplete="off" 
                      placeholder="请输入联系人"
                    />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input 
                      v-model="ruleForm.phone" 
                      autocomplete="off" 
                      placeholder="请输入联系电话"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button 
                      class="el-cancel-btn" 
                      @click="dialogFormVisible = false">取消</el-button>
                    <el-button 
                      id="el-save-btn"
                      type="primary"
                      @click="handleSave()">{{ showSubmit ? '提交' : '保存' }}</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, defineExpose, defineEmits, watch } from 'vue'

// 标记显示/隐藏弹窗
const dialogFormVisible = ref(false)
// 标记是否禁用编辑
const disabled = ref(false)
// 标记是否显示提交
const showSubmit = ref(false)
// 通过ref获取到同名的form表单
const ruleFormRef = ref(null)
// 表格初始化数据，也用于关闭时重置表单数据
const formInitData = {
    title: '',
    content: '',
    name: '',
    phone: ''
}
const ruleForm = reactive({...formInitData})
// 定义必填项规则
const rules = reactive({
    title: [{ required: true, message: '请输入投诉标题', trigger: 'blur' }],
    content: [{ required: true, message: '请输入投诉内容', trigger: 'blur'}],
    name: [{ required: true, message: '请输入联系人', trigger: 'blur'}],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur'}]
})
// Dialog关闭回调
const closeDialog = () => {
    // 重置表单数据
    Object.assign(ruleForm, formInitData)
}

// 监听编辑变化
watch(ruleForm, () => {
    if (showSubmit.value) {
        showSubmit.value = false
        const btn = document.getElementById('el-save-btn')
        btn.innerText='保存'
    }
})

// 获取到emit，用于回调父组件方法
const emit = defineEmits(['addData'])
// 点击保存
const handleSave = () => {
    if (showSubmit.value) {
        disabled.value = true
        emit('addData', ruleForm)
    } else {
        console.log('保存内容', ruleForm)
        // 校验必填项
        ruleFormRef.value.validate((valid, fields) => {
            if (valid) {
                alert('提交成功')
                showSubmit.value = true
                const btn = document.getElementById('el-save-btn')
                btn.innerText='提交'
            } else {
                console.log('error submit!', fields)
            }
        })
    }
}

// 定义方法，给父组件调用，用来显示弹窗
const showDialog = () => {
    disabled.value = false
    dialogFormVisible.value = true
}
// 将方法暴露给外部使用
defineExpose({
    showDialog
})

</script>

<style scoped>
.el-form {
    margin: 0 20px;
}
.el-cancel-btn {
    color: #333;
}
#el-save-btn {
    color: #fff;
    margin-right: 20px;
    background: linear-gradient(90deg, #74DB98 0%, #5AC0AA 100%);
}
</style>